<template>
  <div class="card">
    <h4>基本信息</h4>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content ep-bg-purple">
          <el-icon size="40"><Picture /></el-icon>
          <div class="item-main">
          <span>2973</span>
          <span>商品数量</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ep-bg-purple">
          <el-icon size="40"><UserFilled /></el-icon>
          <div class="item-main">
          <span>24760</span>
          <span>会员数量</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ep-bg-purple">
          <el-icon size="40"><Memo /></el-icon>
          <div class="item-main">
          <span>15992</span>
          <span>订单数量</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ep-bg-purple">
          <el-icon size="40"><Shop /></el-icon>
          <div class="item-main">
          <span>483</span>
          <span>店铺数量</span>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.card{
  background-color: #fff;
  padding: 14px;
  h4{
    font-size: 18px;
    margin-bottom: 10px;
  }
  .el-row {
  margin-bottom: 20px;
  margin-top: 20px;
  .el-col {
  border-radius: 4px;
  color: #fff;
  &:hover{
    transform: translateY(-8px);
    transition: all .35s;
  }
  cursor: pointer;
}
  :first-child{
    .grid-content{
      background-image: linear-gradient(109.6deg,rgba(255,170,113,.6) 11.2%,#ffaa71 100.2%);
      display: flex;
      justify-content: space-around;
      align-items: center;
      .item-main{
        display: flex;
        flex-direction: column;
        font-size: 20px;
        justify-content: space-around;
      }
    }
  }
  :nth-child(2){
      .grid-content{
        background-image: linear-gradient(109.6deg,rgba(255,113,113,.6) 11.2%,#ff7171 100.2%);
        display: flex;
      justify-content: space-around;
      align-items: center;
      .item-main{
        display: flex;
        flex-direction: column;
        font-size: 20px;
        justify-content: space-around;
      }
      }
    }
  :nth-child(3){
    .grid-content{
      background-image: linear-gradient(109.6deg,rgba(147,181,225,.6) 11.2%,#93b5e1 100.2%);
      display: flex;
      justify-content: space-around;
      align-items: center;
      .item-main{
        display: flex;
        flex-direction: column;
        font-size: 20px;
        justify-content: space-around;
      }
    }
  }
  :last-child{
    margin-bottom: 0;
    .grid-content{
      background-image: linear-gradient(109.6deg,rgba(132,140,207,.6) 11.2%,#848ccf 100.2%);
      display: flex;
      justify-content: space-around;
      align-items: center;
      .item-main{
        display: flex;
        flex-direction: column;
        font-size: 20px;
        justify-content: space-around;
      }
    }
  }
  .grid-content {
  border-radius: 4px;
  min-height: 84px;
}
}
}

</style>
